import React, { Component } from 'react';
import { deepCopy, messages } from 'share/common';
import InputLanguage from 'components/template/input-language';
import { Button, Form, Input, message } from 'antd';
import ReportDistributionService from '../report-distribution/report-distribution.service';

const FormItem = Form.Item;

class NewThirdPartyReport extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reportObj: {
        reportCode: '',
        reportUrl: '',
        reportName: '',
        reportDesc: '',
        i18n: {},
      }
    };
  }

  componentWillMount() {

  }

  componentDidMount() {
    this.initData();
  }

  initData = () => {
    const { params } = this.props;
    if (params && params.id) {
      this.setState({ reportObj: params });
    }
  };

  componentWillUnmount() {

  }

  addReport = (e) => {
    e.preventDefault();
    let { reportObj } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let paramsData = deepCopy(values);
        paramsData.reportName = values.reportName.name;
        paramsData.reportDesc = values.reportDesc.name;
        paramsData.i18n = {
          reportName: values.reportName.i18n,
          reportDesc: values.reportDesc.i18n
        };
        if (reportObj.id !== 'new') {
          let updateData = Object.assign(reportObj, paramsData);
          this.createReport(updateData);
        } else {
          delete paramsData.id;
          this.createReport(paramsData);
        }
      }
    });
  };

  createReport = (report) => {
    this.setState({
      loading: true,
    });
    if (report.id) {
      ReportDistributionService.updateReport(report)
        .then((response) => {
          this.setState({ loading: false });
          message.success(messages('basic-10.key107')/*保存成功*/);
          this.props.close(true);
        })
        .catch((err) => {
          this.setState({ loading: false });
        });
    } else {
      ReportDistributionService.createReport(report)
        .then((response) => {
          this.setState({ loading: false });
          message.success(messages('basic-10.key107')/*保存成功*/);
          this.props.close(true);
        })
        .catch((err) => {
          this.setState({ loading: false });
        });
    }
  };

  render() {
    const { reportObj, loading } = this.state;
    const { getFieldDecorator } = this.props.form;

    return (
      <div className='third-party-report'>
        <Form className='new-form' onSubmit={this.addReport}>
          <FormItem required label={messages('basic-10.key47')/*报表名称*/}>
            {getFieldDecorator('reportName', {
              initialValue: {
                name: reportObj.reportName,
                i18n: reportObj.i18n ? reportObj.i18n.reportName : []
              },
              rules: [InputLanguage.required]
            })(
              <InputLanguage required/>
            )
            }
          </FormItem>
          <FormItem required label={messages('basic-10.key182')/*报表描述*/}>
            {getFieldDecorator('reportDesc', {
              initialValue: {
                name: reportObj.reportDesc,
                i18n: reportObj.i18n ? reportObj.i18n.reportDesc : []
              },
              rules: [InputLanguage.required]
            })(
              <InputLanguage/>
            )
            }
          </FormItem>

          <FormItem label={messages('basic-10.key186')/*报表代码*/}>
            {getFieldDecorator('reportCode', {
              initialValue: reportObj.reportCode,
              rules: [
                {
                  required: true,
                  message: messages('common.please.input')/*请输入*/
                }
              ]
            })(
              <Input disabled={reportObj.id !== 'new'}
                     placeholder={messages('common.please.input')/*请输入*/}/>)
            }
          </FormItem>

          <FormItem label={messages('basic-10.key187')/*URL*/}>
            {getFieldDecorator('reportUrl', {
              initialValue: reportObj.reportUrl,
              rules: [
                {
                  required: true,
                  message: messages('common.please.input')/*请输入*/
                }
              ]
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/}/>)
            }
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit" loading={loading}>
              {messages('common.save')/*保存*/}
            </Button>
            <Button onClick={() => {
              this.props.close();
            }}>
              {messages('common.cancel')/*取消*/}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

const WrappedNewThirdPartyReport = Form.create()(NewThirdPartyReport);

export default WrappedNewThirdPartyReport;
